<template>
	<jf-navigation>
		<template #left v-if="data.loadEnd">
			<view class="info_navigation" @click="navGo('/pages/index/user/user?id=' + data.info.publisher.uid)">
				<image :src="data.info.publisher.avatar || headerIcon" class="info_navigation_header"></image>
				<view class="info_navigation_name">{{
          data.info.publisher.nickname
        }}</view>
			</view>
		</template>
		<template #right v-if="data.loadEnd">
			<view class="info_navigation">
				<view class="info_navigation_btn" :class="{ active: store.getFans(data.info.publisher.uid) === 0 }"
					@click="article.attentionUser(data.info)" v-if="data.info.uid !== data.userId">
					{{$t(store.getFans(data.info.publisher.uid) === 1? 'common.fans.cancelAttention': 'common.fans.attention')}}
				</view>
				<image src="@/static/images/navigation/more.png" class="info_navigation_icon" @click="getActionSheet()">
				</image>
				<!-- <image src="@/static/images/navigation/share001.png" class="info_navigation_icon" @click="share()">
				</image> -->
			</view>
		</template>
	</jf-navigation>

	<block v-if="data.loadEnd">
		<view class="info_swiper_box" v-if="data.info.cover_image">
			<swiper circular :duration="1000" class="info_swiper" @change="getCurrent">
				<swiper-item v-for="(item, index) in data.info.image_input" :key="index">
					<image :src="item" class="info_swiper_img" mode="aspectFill" @click="preview(item)"></image>
				</swiper-item>
			</swiper>
			<view class="info_swiper_total">{{ data.current + 1 }}/{{ data.info.image_input.length }}</view>
		</view>

		<view class="info_container">
			<view class="info_title">
				<view>{{ data.info.title }}</view>
				<image src="@/static/images/index/icon012.png"></image>
			</view>
			<view class="info_topic">
				<view v-for="(item, index) in data.info.topic" :key="index">#{{ item }}</view>
			</view>
			
			<view class="info_desc">
				<text>{{ data.info.content }}</text>
				<image src="@/static/images/index/icon012.png"></image>
			</view>
			<view class="info_mark">
							<view>{{
			  DateTimeUtils.parseTime(data.info.add_time * 1000, '{y}/{m}/{d}')
			}}
								| {{ data.info.cateinfo[data.locale] }}</view>
							<view>IP：{{ data.info.addr }}</view>
						</view>
		</view>

		<view class="info_comment">
			<view class="info_comment_header">
				<view class="info_comment_title">{{ $t('index.info.commentTitle') }} {{ data.info.comment_num }}</view>
				<view class="info_comment_btns">
					<view :class="{ active: data.currentIndex === 0 }" @click="selMenu(0)">{{ $t('index.info.new') }}
					</view>
					<view :class="{ active: data.currentIndex === 1 }" @click="selMenu(1)">{{ $t('index.info.hot') }}
					</view>
				</view>
			</view>
		</view>
		<!-- 评论内容 -->
		<jf-comment :uid="data.info.uid" v-model="data.commentList" @reply="reply" @star="star" @more="more"
			@remove="remove"></jf-comment>

		<jf-fixed>
			<view class="info_btns">
				<view class="info_input" @click="openComment()">
					<image src="@/static/images/index/icon002.png"></image>
					<view>{{ $t('index.info.comment') }}</view>
				</view>
				<view class="info_btn" @click="data.showCommentList = true">
					<image src="@/static/images/index/icon017.png"></image>
					<view>{{ data.info.comment_num }}</view>
				</view>
				<view class="info_btn" @click="article.collect(data.info)">
					<image :src="data.info.is_collect === 1 ? collectIcon : unCollectIcon"></image>
					<view>{{ data.info.collect }}</view>
				</view>
				<view class="info_btn" @click="article.star(data.info, 1)">
					<image :src="data.info.is_star === 1 ? starIcon : unStarIcon"></image>
					<view>{{ data.info.star }}</view>
				</view>
			</view>
		</jf-fixed>
	</block>

	<Comment v-model="data.showComment" :type="data.commentType" :info="data.commentInfo" :article="article"
		:parent="data.parent" @change="data.info.comment_num += 1"></Comment>

	<jf-popup v-model="data.showCommentList" :showTitle="false" scroll height="60vh"
		@scrolltolower="getCommentList(data.currentIndex + 1)" v-if="data.loadEnd">
		<jf-comment :uid="data.info.uid" v-model="data.commentList" @reply="reply" @star="star" @more="more"
			@remove="remove"></jf-comment>
	</jf-popup>
</template>

<script lang="ts" setup>
	import headerIcon from '@/static/images/common/header_icon.png'
	import starIcon from '@/static/images/index/icon019.png'
	import unStarIcon from '@/static/images/index/icon016.png'
	import collectIcon from '@/static/images/index/icon018.png'
	import unCollectIcon from '@/static/images/index/icon015.png'
	import { reactive, getCurrentInstance, watchEffect } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import DateTimeUtils from '@/static/utils/DateTimeUtils'
	import Methods from '../Methods'
	import Comment from '@/components/Comment'
	import { useStore } from '@/store/main'

	const { proxy } = getCurrentInstance()
	const store = useStore()
	const data = reactive({
		id: 0,
		userId: store.getUserinfo.uid,
		current: 0,
		currentIndex: 0,
		commentList: [],
		locale: '',
		loadEnd: false,
		loadError: false,
		info: null,
		showComment: false,
		showCommentList: false,
		focus: false,
		parent: undefined,
		comment: undefined,
		commentInfo: undefined,
		commentType: 1,
	})
	const article = new Methods()

	const share = () : void => {
		uni.setClipboardData({
			data: data.info.secret_code,
			showToast: false,
			success: () => {
				uni.showToast({
					title: proxy.$t('index.info.shareMessage'),
					icon: 'none',
				})
			},
		})
	}
	const navGo = (url : string) : void => {
		uni.navigateTo({ url })
	}
	const getCurrent = (event : any) : void => {
		data.current = event.target.current
	}
	const selMenu = (index : number) : void => {
		data.commentList = []
		data.currentIndex = index
		getCommentList(index + 1, true)
	}
	const preview = (current : string) : void => {
		uni.previewImage({
			urls: data.info.image_input,
			current,
		})
	}
	const getCommentList = (type : number, init ?: boolean) : void => {
		article.getComment(type, init).then((list : any) => {
			data.commentList = reactive(list)
		})
	}
	const reply = (parent : any, comment : any, type : number) : void => {
		data.parent = parent
		data.commentInfo = comment
		data.commentType = type
		data.showComment = true
	}
	const openComment = () : void => {
		data.parent = data
		data.commentInfo = undefined
		data.commentType = 1
		data.showComment = true
	}
	const star = (item : any) : void => {
		article.star(item, 2)
	}
	const more = (item : any) : void => {
		article.loadComment(item)
	}
	const remove = (item : any) : void => {
		article.removeComment(item)
		data.info.comment_num -= 1
	}

	const getActionSheet = () : void => {
		let array : string[];

		if (data.userId == data.info.uid) {
			array = [proxy.$t('index.info.sharebtn'), proxy.$t('index.info.reportingbtn'), proxy.$t('index.info.comment.remove')]
		} else {
			array = [proxy.$t('index.info.sharebtn'), proxy.$t('index.info.reportingbtn')]
		}
		uni.showActionSheet({
			itemList: array,
			success: function (res) {
				if (res.tapIndex == 1) {
					navGo('/pages/index/info/complaint/complaint?pid=' + data.info.id)
				} else if (res.tapIndex == 0) {
					share();
				} else {
					console.log("shanchu");
					article
						.deleteArt(data.id)
						.then((info : any) => {
							console.log('info', info)
							uni.redirectTo({
								url: '/pages/index/index'
							})
							data.loadEnd = true
						})
						.catch(() => {
							data.loadError = true
						})
				}
			},
			fail: function (res) {
				console.log(res.errMsg);

			}
		});
	}



	onLoad((options) => {
		console.log("data.userId", data.userId)
		data.id = Number(options.id);
		data.locale = uni.getLocale().replace('-', '_')
		article
			.getInfo(data.id)
			.then((info : any) => {
				console.log('info', info)
				data.info = info
				data.loadEnd = true
				selMenu(0)
				store.setStar(info.id, info.is_star)
				store.setFans(info.publisher.uid, info.publisher.is_subscribe)
			})
			.catch(() => {
				data.loadError = true
			})
	})
	onReachBottom(() => {
		getCommentList(data.currentIndex + 1)
	})
</script>

<style lang="scss">
	.info_navigation {
		@include layout();

		.info_navigation_header {
			width: 72rpx;
			height: 72rpx;
			border-radius: 36rpx;
		}

		.info_navigation_name {
			font-weight: 400;
			line-height: 32rpx;
			margin-left: 12rpx;
			font-size: 28rpx;
		}

		.info_navigation_btn {
			--btn-color: #535a69;
			line-height: 56rpx;
			border: 2rpx solid var(--btn-color);
			padding: 0 24rpx;
			box-sizing: border-box;
			font-weight: 400;
			color: var(--btn-color);
			font-size: 24rpx;
			border-radius: 28rpx;

			&.active {
				--btn-color: #326aff;
			}
		}

		.info_navigation_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 24rpx;
		}
	}

	.info_swiper_box {
		position: relative;
		width: 750rpx;
		height: 560rpx;

		.info_swiper {
			width: 750rpx;
			height: 560rpx;

			.info_swiper_img {
				width: 750rpx;
				height: 560rpx;
			}
		}

		.info_swiper_total {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
			background: rgba(0, 0, 0, 0.2);
			line-height: 40rpx;
			padding: 0 24rpx;
			border-radius: 20rpx;
			font-weight: 500;
			color: #ffffff;
			font-size: 20rpx;
		}
	}

	.info_container {
		width: 100vw;
		padding: 32rpx;
		border-bottom: 12rpx solid #f2f4f6;
		box-sizing: border-box;

		.info_title {
			@include layout(row, flex-start);
			font-weight: 500;
			line-height: 44rpx;
			font-size: 32rpx;

			view {
				flex-grow: 1;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 10rpx;
				flex-shrink: 0;
				margin-top: 6rpx;
			}
		}

		.info_topic {
			@include layout();
			flex-wrap: wrap;
			font-weight: 400;
			color: #2c5998;
			line-height: 32rpx;
			font-size: 24rpx;
			margin-top: 24rpx;

			view {
				margin-right: 24rpx;
			}
		}

		.info_mark {
			@include layout(row, center, space-between);
			font-weight: 400;
			color: #b2b9c6;
			line-height: 28rpx;
			font-size: 20rpx;
			margin-top: 16rpx;
		}

		.info_desc {
			@include layout(row, flex-start);
			font-weight: 400;
			line-height: 48rpx;
			font-size: 26rpx;
			margin-top: 24rpx;
			padding: 24rpx 0;
			border-top: 2rpx solid #edeff3;

			view {
				flex-grow: 1;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 10rpx;
				flex-shrink: 0;
				margin-top: 6rpx;
			}
		}
	}

	.info_comment {
		width: 100vw;
		box-sizing: border-box;
		padding: 32rpx;

		.info_comment_header {
			@include layout(row, center, space-between);

			.info_comment_title {
				font-weight: 400;
				color: #6b7280;
				line-height: 32rpx;
				font-size: 26rpx;
			}

			.info_comment_btns {
				@include layout(row, center, center);
				width: 244rpx;
				height: 64rpx;
				background: #f2f4f6;
				border-radius: 32rpx;

				view {
					width: 120rpx;
					height: 56rpx;
					text-align: center;
					font-weight: 400;
					color: #6b7280;
					line-height: 56rpx;
					font-size: 24rpx;
					border-radius: 28rpx;

					&.active {
						color: #2e65ff;
						background: #ffffff;
						font-weight: 500;
					}
				}
			}
		}
	}

	.info_btns {
		width: 100vw;
		height: 100rpx;
		border-top: 2rpx solid #edeff3;
		@include layout();
		padding: 0 32rpx;
		box-sizing: border-box;

		.info_input {
			@include layout();
			flex-grow: 1;
			height: 72rpx;
			background: #f2f4f6;
			border-radius: 36rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			font-weight: 400;
			color: #b2b9c6;
			line-height: 40rpx;
			font-size: 28rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}

		.info_btn {
			@include layout();
			height: 72rpx;
			margin-left: 24rpx;
			font-family: Avenir;
			font-weight: 500;
			line-height: 24rpx;
			font-size: 24rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>